<template>
  <div class="r-user">
    <div class="u-pic">
      <a @click="goSpace()">
        <el-image
          :src="url"
          
        />
      </a>
    </div>
    <div>
      <el-dropdown>
        <span class="el-dropdown-link" style="font-size: 16px">
          {{ userName }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="personalInfor()"
              >个人空间</el-dropdown-item
            >
            <template v-if="role=='admin'">
            <el-dropdown-item @click="goBackstage()">后台管理</el-dropdown-item>

            </template>
            <el-dropdown-item @click="quit()">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapGetters } from "vuex";
export default {
  // 数据源
  data() {
    return {};
  },
  //生命周期函数---
  mounted() {},
  //基本方法
  methods: {
    ...mapMutations({
      changeOffOnline: "changeOffOnline",
    }),
    personalInfor() {
      this.$router.push({
        path: "/user/center/information",
      });
    },
    goBackstage(){
     this.$router.push({
        path: "/admin/usermanage",
      });
    },
    quit() {
      ElMessage({
        type: "success",
        message: "拜拜",
      });
      window.sessionStorage.removeItem("token");
      window.sessionStorage.removeItem("store");
      this.changeOffOnline();
      this.$router.push({
        path: "/home",
      });
    },
    goSpace(){
    this.$router.push({
       path:"/space" 
    })
    }
  },
  //计算类型方法和其他方法的区别：有缓存。以内存换时间，适用于频繁使用的计算
  computed: {
    ...mapGetters({
      userName: "getUserName",
      url:'getPic',
      role:'getRole'
    }),
  },
};
</script>

<style scoped>
.u-pic {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}
.r-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>